<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link href="../Public/css/bootstrap.min.css" rel="stylesheet">
	<script src="../Public/js/jquery-1.11.1.min.js"></script>
	<script src="../Public/js/bootstrap.min.js"></script>
	<style>
		/*重置*/
		*{
			box-sizing: border-box;
			text-size-adjust: none;
			-webkit-text-size-adjust: none;
		}
		html,body,.container{
			padding: 0;
			margin: 0;
			height: 100%
		}
		.container{
			position: relative;
			max-width: 420px;
			min-width: 320px;
			margin: auto;
		}
		img{
			max-width: 100%;
		}

		/*布局*/
		.container{
			display: flex;
			flex-direction: column;
			height: 651px;
			border: 1px solid gray;
		}
		.a{
			height: 52px;
			background-color: #a5eaef;
		}

		.b{
			flex: 1;
			width: 414px;
			min-height: 0;
		}
		.c{
			margin-right: 32px;
			margin-top: 5px
		}
		.d{
			height: 113px;
			border: 1px solid #dfdfdf;
		}
		.d1{
			height: 50px;
			border: 1px solid #dfdfdf;
		}
		.f{
			height: 51px;
			background-color: #e0e0e0;
		}
		.f{display: flex}
		.f>*{
			flex: 1;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="a">
			<img src="images/a1.png" style="margin-left: 30px;margin-top: 5px">
			<img src="images/c1.png" class="pull-right c">
		</div>
		<div class="b">
			<div style="font-family: Arial;font-size: 19.44px;color: #848484;margin-top: 9px;margin-left: 10px">C</div>
			<div class="d">
				<div>
					<img src="images/c2.png" style="margin-top: 9px;margin-left:10px;float: left ">
					<div style="font-size: 19.44px;font-family: 黑体;float: left;margin-left: 16px;margin-top: 20px">陈小小</div>
					<img src="images/c3.png" style="margin-top: 18px;margin-right: 41px;float: right">
				</div>

				<div>
					<img src="images/c2.png" style="margin-top: 60px;float: left;margin-left: -113px">
					<div style="font-size: 19.44px;font-family: 黑体;display: inline;margin-left: -58px;float: left;margin-top: 70px">陈小小</div>
					<img src="images/c3.png" style="float: left;margin-top: 30px;margin-left: 225px">
				</div>
			</div>

			<div style="font-family: Arial;font-size: 19.44px;color: #848484;margin-top: 9px;margin-left: 10px">D</div>
			<div class="d">
				<div>
					<img src="images/c2.png" style="margin-top: 9px;margin-left:10px;float: left ">
					<div style="font-size: 19.44px;font-family: 黑体;float: left;margin-left: 16px;margin-top: 20px">董小小</div>
					<img src="images/c3.png" class="pull-right" style="margin-top: 18px;margin-right: 41px;float: left">
				</div>

				<div>
					<img src="images/c2.png" style="margin-top: 60px;float: left;margin-left: -113px">
					<div style="font-size: 19.44px;font-family: 黑体;display: inline;margin-left: -58px;float: left;margin-top: 70px">董小小</div>
					<img src="images/c3.png" style="float: left;margin-top: 30px;margin-left: 225px">
				</div>
			</div>

			<div style="font-family: Arial;font-size: 19.44px;color: #848484;margin-top: 9px;margin-left: 10px">F</div>
			<div class="d">
				<div>
					<img src="images/c2.png" style="margin-top: 9px;margin-left:10px;float: left ">
					<div style="font-size: 19.44px;font-family: 黑体;float: left;margin-left: 16px;margin-top: 20px">冯小小</div>
					<img src="images/c3.png" class="pull-right" style="margin-top: 18px;margin-right: 41px;float: left">
				</div>

				<div>
					<img src="images/c2.png" style="margin-top: 60px;float: left;margin-left: -113px">
					<div style="font-size: 19.44px;font-family: 黑体;display: inline;margin-left: -58px;float: left;margin-top: 70px">冯小小</div>
					<img src="images/c3.png" style="float: left;margin-top: 30px;margin-left: 225px">
				</div>
			</div>

			<div style="font-family: Arial;font-size: 19.44px;color: #848484;margin-top: 9px;margin-left: 10px">G</div>
			<div class="d1">
				<div>
					<img src="images/c2.png" style="margin-top: 9px;margin-left:10px;float: left ">
					<div style="font-size: 19.44px;font-family: 黑体;float: left;margin-left: 16px;margin-top: 20px">葛小小</div>
					<img src="images/c3.png" class="pull-right" style="margin-top: 18px;margin-right: 41px;float: left">
				</div>
			</div>
		</div>
		<div class="f">
			<div style="font-size: 22px;line-height: 51px;margin-left: 342px">确定</div>
		</div>
	</div>
</body>
</html>